<template>
  <div class="echartsBody">
    <div class="echartsBody1" ref="echarts1"></div>
    <div class="echartsBody2">
      <div class="centerbg"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts"

export default {
  name: 'echarts1',
  components: {},
  data() {
    return {}
  },
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    title: {
      type: String,
      default() {
        return '测试统计';
      }
    },
    total: {
      type: String,
      default() {
        return 0;
      }
    },
  },
  watch: {
    list() {
      this.drawEcharts()
    },
  },
  mounted() {
    var that = this;
    const viewElem = document.body;
    // 监听窗口变化,重绘echarts
    const resizeObserver = new ResizeObserver(() => {
      setTimeout(() => {
        that.drawEcharts();
      }, 300)
    });
    resizeObserver.observe(viewElem);
  },
  computed: {
    colorList: function () {
      var that = this;
      var colorList = []
      that.list.forEach((type) => {
        var color = new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
          offset: 0,
          color: type.color1
        }, {
          offset: 1,
          color: type.color2
        }])
        colorList.push(color)
      });
      return colorList
    }
  },
  methods: {
    drawEcharts() {
      var that = this
      let myChart = echarts.init(this.$refs.echarts1)
      var colors = this.colorList
      var data = []
      that.list.forEach((type) => {
        if (type.checked) {
          var datas = {
            ...type,
            itemStyle: {
              normal: {
                borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                  offset: 0,
                  color: type.color1
                }, {
                  offset: 1,
                  color: type.color2
                }]),
              }
            }
          }
          data.push(datas)
        }
      });
      var option = {
        color: colors,
        tooltip: {
          show: false,
          trigger: 'item',
          backgroundColor: 'rgba(0, 0, 0, 0)', // 设置 tooltip 背景色为透明
          borderColor: 'rgba(0, 0, 0, 0)',
          opacity: 1,
          shadowColor: 'rgba(0, 0, 0, 0)', // 设置阴影颜色为透明
          shadowBlur: 0, // 设置阴影模糊度为0，即无阴影
          confine: true,
          // 使用自定义的 formatter 函数
          formatter: function (params) {
            console.log(params)
            // 获取当前项的颜色
            var color = params.data.color1;
            return `
    <div class="tooltipWin">
      <h4 class="tooltipTitle">设备统计</h4>
      <div class="tooltipDesc">
        <div class="line" style="background-color: ${color};"></div>
        <span>${params.name}</span>
        <p><span class="nums" style="color: ${color};">${params.value}</span>个</p>
      </div>
    </div>
  `;
          }
        },
        legend: {
          show: false,
          orient: 'horizontal',
          left: 'center',
          bottom: '0',
          itemWidth: 16,
          itemHeight: 12,
          itemGap: 30,
          icon: 'rect',
          textStyle: {
            color: 'rgba(255, 255, 255, 1)',
            fontSize: '14'
          },
          data: data
        },
        series: [
          {
            name: '设备统计',
            type: 'pie',
            // roseType: 'area',
            center: ['50%', '50%'],
            radius: ['45%', '60%'],
            // borderCap: 'round',
            label: {
              show: false,
              formatter: '{c}', // 显示数据值
              normal: {
                show: false,
                fontSize: 14,
                color: '#92B2D7'
              },
              emphasis: { // 鼠标悬停时的样式
                show: false,
                formatter: '{c}', // 显示数据值

                fontSize: 16,
                fontWeight: 500,
                color: '#FFFFFF',
                fontFamily: 'DIN, DIN'
              }
            },
            labelLine: {
              show: false,
              length: 1,
              length2: 10
            },
            data: data
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echartsBody {
  position: relative;
  width: 50%;
  height: calc(100% - 0px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .echartsBody1 {
    position: relative;
    width: 100%;
    height: calc(100% - 0px);
  }

  .echartsBody2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 0px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
    align-content: flex-start;
    pointer-events: none;

    .echartsBody2Inner {
      display: flex;
      width: 86px;
      height: 86px;
      justify-content: center;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: column;
      align-content: flex-start;
      position: relative;
      z-index: 0;

    }

    .centerbg {
      position: absolute;
      width: 100%;
      height: 100%;
      background: url("../assets/center.png") center center no-repeat;
      background-size: 86px 75px;
      animation: rotate 6s linear infinite;

    }

    .echartsTitle {
      font-size: 18px;
      font-family: DIN, DIN;
      font-weight: 500;
      color: #FFFFFF;
    }

    .echartsDesc {
      font-size: 12px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
    }
  }
}
</style>
<style lang="scss">
.tooltipWin {
  width: 154px;
  height: 70px;
  background: rgba(#05364d, 0.7);
  opacity: 1;
  border: 1px solid #5896b3;

  .tooltipTitle {
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: #0BF5FF;
    padding-left: 10px;
    padding-top: 10px;
  }

  .tooltipDesc {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    padding-left: 10px;
    padding-top: 10px;

    .line {
      width: 4px;
      height: 10px;
      background: #FFB600;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      margin-right: 7px;
    }

    span {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #C9EFFF;
    }

    p {
      font-size: 14px;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #fff;
      margin-left: 20px;
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg); /*从0度开始*/
  }
  100% {
    transform: rotateZ(360deg); /*360度结束*/
  }
}
</style>
